<template>
<div class="design-item-list" :class="{heightLight : current == richeditorForm.itemId}">
	<div class="design-edit-box" :style="{paddingLeft: richeditorForm.gap+'px',paddingRight: richeditorForm.gap+'px'}" v-html="richeditorForm.content || content"></div>
	<div class="design-edit" v-show="(current == richeditorForm.itemId) && richeditorForm.toolbarEdit && !richeditorForm.toolbarComponents">
		<h4 class="edit-title"><span>富文本</span></h4>
		<el-form :model="richeditorForm" ref="richeditorForm" label-width="80px" class="demo-headerForm">
			<el-form-item label="左右空白">
				<div class="block" style="margin-left: 5px;">
					<el-slider v-model="richeditorForm.gap" @change="changeStatus(richeditorForm)"></el-slider>
				</div>
			</el-form-item>
			<div class="tinymce-editor">
				<editor v-model="richeditorForm.content" class="editorbox" :init="init"></editor>
			</div>
		</el-form>
	</div>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'

export default {
	components: {Editor},
    data () {
        return {
			content: '<p>点此编辑【富文本】内容</p><p><br>你可以对文字进行 <strong>加粗</strong>、<em>斜体</em>、<span style="text-decoration: underline;">下划线</span>、<span style="text-decoration: line-through;">删除线</span>、以及<span style="font-size: 16px;">字号大小</span>等简单排版操作。</p><p><br>也可以在这里插入图片、并对图片加上超级链接，方便用户点击。</p>',
			init: {
				content_style: "div,p {border: 1px dashed #efefef;}",
				selector: '.editorbox',
				width: 400,
				height: 300,//编辑器高度
				skin: 'default',
				language: 'zh_CN',
				language_url: '/static/tinymce/langs/zh_CN.js',//语言包的路径
				language: 'zh_CN',//语言
				skin_url: '/static/tinymce/skins/lightgray',//skin路径
				// branding: false,//是否禁用“Powered by TinyMCE”
				// menubar: false,//顶部菜单栏显示
				toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
			}
		}
    },
    props:{
		richeditorForm: {
			type: Object,
			default() {
				return {}
			}
		},
		current: String
    },
	created(){},
	mounted() {
		tinymce.init({})
	},
	methods:{
		changeStatus(form){
			this.$emit("childChange",form);
		},
		
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import "../../../../static/css/style.less";
@import "../../../../static/css/element.less";
.my_class {
	box-sizing: border-box;
    width: 377px;
    margin: 0;
    border: solid 1px #8391a5;
}
.my_class div,
.my_class p {
    border: 1px dashed #efefef;
}
</style>